<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="channels.adminId"
        placeholder="所属渠道"
        clearable
        class="filter-item"
        style="width: 200px; margin-right: 20px"
      >
        <el-option v-for="item in calendarTypeOptions" :key="item.id" :label="item.nickname" :value="item.id" />
      </el-select>

      <!-- <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期" align="right" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
      </el-date-picker> -->
      <span style="margin-right: 20px">
        <el-date-picker v-model="value1" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="开始日期" />
      </span>
      <span>
        <el-date-picker v-model="value2" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="结束日期" />
      </span>

      <el-input
        v-model="channels.channelCode"
        placeholder="推荐码"
        style="width: 200px; margin-left: 20px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        style="margin-left: 20px"
        @click="handleFilter"
      >
        查询
      </el-button>
      <!-- <el-button :loading="downloadLoading" size="mini" type="info" icon="el-icon-document" @click="exportExcel">
        导出xlsx文
      </el-button> -->
    </div>
    <!-- show-summary :summary-method="getSummaries" -->
    <el-table :data="list" stripe style="width: 1400px" border show-summary :summary-method="getSummaries">
      <el-table-column prop="channel_code" label="推荐码" width="100" align="center" />
      <el-table-column prop="channel_name" label="名称" width="200" align="center" />
      <el-table-column prop="adminname" label="所属渠道" align="center" width="148">
        <template slot-scope="{ row }">
          {{ row.adminname || "-" }}
        </template>
      </el-table-column>
      <el-table-column prop="new_user" label="注册账号数" align="center" width="100" />
      <!-- <el-table-column prop="new_device" label="注册设备数" align="center" width="100" /> -->
      <el-table-column prop="rechare_count" label="充值账号数" align="center" width="100" />
      <el-table-column prop="recharge_money" label="充值金额(元)" align="center" width="200" />
      <el-table-column prop="recharge_rate" label="充值率" align="center" width="100" />
      <el-table-column prop="day_count7" label="7日内登录" align="center" width="150" />
      <el-table-column prop="day_count15" label="15日内登录" align="center" width="150" />
      <el-table-column prop="day_count30" label="30日内登录" align="center" width="150" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="channels.pageNo"
      :limit.sync="channels.pageSize"
      @pagination="handleFilter"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {
  encryption2
} from '@/api/index'
import {
  parseTime
} from '@/utils'
export default {
  name: 'ComplexTable',
  components: {
    Pagination
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }
        ]
      },
      value1: '',
      value2: '',
      channels: {
        adminId: '', // 上级渠道ID
        channelCode: '', // 推荐码
        pageNo: 1,
        pageSize: 10
      },
      calendarTypeOptions: [],
      total: 0,
      list: [],
      total_rechare_count: '',
      downloadLoading: false
    }
  },
  created() {
    this.handleFilter()
    this.Channel()
  },
  methods: {
    exportExcel() {
      if (this.list.length) {
        this.downloadLoading = true
        import('@/vendor/Export2Excel').then((excel) => {
          const tHeader = [
            '推荐码',
            '名称',
            '所属渠道',
            '注册账号数',
            '充值账号数',
            '充值金额',
            'recharge_rate',
            '7日内登录',
            '15日内登录',
            '30日内登录'
          ]
          const filterVal = [
            'channel_code',
            'channel_name',
            'adminname',
            'new_device',
            'rechare_count',
            'recharge_money',
            'recharge_rate',
            'day_count7',
            'day_count15',
            'day_count30'
          ]

          const list = this.list
          const data = this.formatJson(filterVal, list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '转化统计表'
          })
          this.downloadLoading = false
        })
      } else {
        this.$message({
          message: '没有数据',
          type: 'warning'
        })
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]))
    },
    getSummaries(param) {
      const {
        columns,
        data
      } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        } else if (index == 5) {
          sums[index] = this.total_rechare_count
        } else {
          sums[index] = '-'
        }
      })
      return sums
    },
    Channel() {
      const arys = {}
      const url = '/market/singleList'
      encryption2(arys, url).then((res) => {
        if (res.data.status === 0) {
          this.calendarTypeOptions = res.data.result
        } else {
          this.$message.error(res.data.text)
        }
      })
    },
    // 查询
    handleFilter() {
      const arys = {
        adminId: this.channels.adminId, // 上级渠道ID
        startDate: this.value1 ? this.value1 : '', // 消费开始时间
        endDate: this.value2 ? this.value2 : '', // 消费结束时间
        channelCode: this.channels.channelCode, // 推荐码
        pageNo: this.channels.pageNo,
        pageSize: this.channels.pageSize
      }
      const url = '/market/conversionStatis'
      encryption2(arys, url)
        .then((res) => {
          if (res.data.status === 0) {
            // console.log(res);
            this.list = res.data.result.list
            this.total = res.data.result.count
            this.total_rechare_count = res.data.result.total_rechare_count
          } else {
            this.$message({
              message: res.data.text,
              type: 'error'
            })
          }
        })
        .catch((res) => {
          this.$message({
            message: res.message,
            type: 'error'
          })
        })
    },
    handleCreate() {
      // console.log("创建推荐码");
      this.$router.push({
        path: '/QueryCode/CreateCode'
      })
    }
  }
}
</script>
<style scoped>
  .filter-container .filter-item {
    margin-bottom: 0;
  }

  .el-table--border {
    border-right: 1px solid #dfe6ec;
  }

  .filter-container {
    width: 1200px;
  }

  .el-button--mini {
    padding: 10px 15px;
  }
</style>
